<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <link rel="stylesheet" href="../../../railView/css/railbox.css" type="text/css" />
    <link rel="stylesheet" href="../css/railView.css" type="text/css" />
    <script type="text/javascript" src="../../../railView/js/railbox-2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/UUID.js"></script>
     <!-- vue -->
     <script src="../js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
    <div id="app">
        <div id="buttom-container">
            <el-button type="info" @click="handleCreate">创建批注</el-button>
            <el-button type="info" @click="deleteNote">删除批注</el-button>
        </div>
        <div id="left" style="width:100%;height:100%;position:relative;float:left"></div>
    </div>
    <script id="viewerStartup">
        const vm = new Vue({
            el: '#app',
            data: {
                viewer: null
            },
            mounted () {
                this.initModel()
            },
            methods: {
                initModel () {
                    let this_ = this
                    var proleft = new CarsView("left", 'csr', exampleModelId, this.callbackLeft, {
                        isShowAxis: true
                    });
                    proleft.then(function (value) {
                        this_.viewer = value;
                    });
                },
                callbackLeft(nodeNames, nodeIds, position, center, normal) {},
                handleCreate() {
                    const markupItem = this.viewer.getActiveMarkupView()
                    console.log(markupItem, '创建批注');
                    if (markupItem === null) return this.open()
                    
                    this.viewer.createMarkupViewWithMarkupItem(markupItem[0], true)
                },
                deleteNote() {
                    this.viewer.deleteMarkupItem()
                },
                open() {
                    this.$confirm('请先在下方工具栏中使用批注添加批注', '提示', {
                        confirmButtonText: '确定',
                        showCancelButton: false,
                        type: 'warning'
                    })
                }
            }
        })
    </script>
</body>
</html>
